<template>
  <div>
    <div class="whole" ref="whol">
      <!-- 名称 -->
      <Logo></Logo>
      <!-- 用户名表单 -->
      <div class="froms">
        <van-form @submit="onSubmit" :colon="true">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            :border="true"
            left-icon="user-circle-o"
            :clearable="true"
            :rules="phoneRules"
            placeholder="请输入用户名"
          >
            <van-icon name="user-circle-o" />
          </van-field>
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            :border="true"
            :clearable="true"
            :rules="codeRules"
            left-icon="bag-o"
            placeholder="请输入密码"
            autosize
          />
          <div style="margin-top:40px">
            <van-row type="flex" justify="center" class="row">
              <van-col span="12">
                <van-button type="info" :disabled="disabled" class="but" native-type="submit">登录</van-button>
              </van-col>
              <van-col span="12">
                <van-button color="#9e9e9e" class="but" @click="Reset">重置</van-button>
              </van-col>
            </van-row>
          </div>
        </van-form>
      </div>
      <!-- 注册忘记密码 -->
      <div class="register">
        <router-link to="/Logon">快速注册</router-link>|
        <router-link to="/forget">忘记密码</router-link>|
        <router-link to @click.native="$router.push('/index')">随便逛逛</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "../api/User-api";
import Logo from "../components/Logo.vue";
import { mapState } from "vuex";
import { SUCCESS } from "../store/mutaions_type";
export default {
  data() {
    return {
      username: "",
      password: "",
      disabled: false,
      phoneRules: [
        { required: true, message: "请输入用户名" },
        {
          validator: this.phoneValidator,
          message: "只能为字母和数字且长度在4-10个字符"
        },
        { validator: this.empty, message: "请输入用户名" }
      ],
      codeRules: [
        { required: true, message: "请输入密码" },
        { validator: this.codeRule, message: "长度在6-10个字符" },
        { validator: this.empty, message: "请输入密码" }
      ]
    };
  },
  methods: {
    phoneValidator(val) {
      return /^[a-zA-Z0-9]{4,10}$/.test(val);
    },
    empty(val) {
      if (val == null) {
        return false;
      }
    },
    codeRule(val) {
      return /^[a-zA-Z0-9]{6,10}$/.test(val);
    },
    Reset() {
      (this.username = ""), (this.password = "");
    },
    onSubmit() {
      if (this.disabled == false) {
        this.disabled = true;
        setTimeout( ()=>{
          this.disabled = false;
          console.log(this.disabled);
        }, 3000);
        login(this.username, this.password).then(res => {
          if (res.code == 0) {
            this.$router.push({ name: "User" });
            this.$notify({
              type: "success",
              message: "登录成功"
            });
            this.$store.commit(SUCCESS, {
              Whether: res.code
            });
          } else {
            this.$notify({
              type: "danger",
              message: res.msg
            });
            this.$store.commit(SUCCESS, {
              Whether: res.code
            });
          }
          console.log(res);
        });
      }
    }
  },
  components: {
    Logo
  },
  computed: {
    ...mapState({
      Whether: "Whether"
    })
  },
  mounted() {
    this.$refs.whol.style.height = screen.availHeight + "px";
  }
};
</script>
<style lang="less" scoped>
.whole {
  background-color: #f5f6f6;
  .froms {
    text-align: center;
    /deep/.van-icon {
      font-size: 22px;
    }
    /deep/ .van-field__label {
      width: 60px;
      text-align: left;
    }
  }
  .register {
    margin-top: 300px;
    text-align: center;
    .arrow {
      margin-right: 5px;
    }
  }
  .forget {
    position: absolute;
    bottom: 50px;
    right: 20px;
  }
  .but {
    border-radius: 6px;
  }
}
</style>